<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--模板-->
    <div id="app">
        <v-child>
            <template slot="a" slot-scope="obj">
                <span>msg from app模板1/{{obj.data1}}</span>
            </template>
            <template slot="b" slot-scope="obj">
                <span>msg from app模板2/{{obj.data2}}</span>
            </template>
        </v-child>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>

    Vue.component("v-child",{

        template:`<div class="child">
                      <span>v-child</span> <br>
                      <slot name="a" :data1="data1"></slot> <br>
                      <slot name="b" :data2="data2"></slot> <br>
                  </div>`,
        data(){
            return {
                data1:"xxxx",
                data2:"yyyy",
            }
        }
    })

    // 配置
    new Vue({
        el:"#app",
        data:{
            msg:"hello Vue"   //申明式编程
        }
    })
</script>
</html>